import { useNavigate,useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Tabs } from 'antd-mobile'
// 引入logo图片
import logo from '../assets/images/logo.png'
import searchimg from '../assets/images/search.png'
import dizhi from '../assets/images/地址.png'
import gouwuche from '../assets/images/首页购物车.png'
import gift2 from '../assets/images/底2.png'
import quclik from '../assets/images/马上抢.png'

// 引入优惠券图片
import youhui1 from '../assets/images/优惠券@3x.png'
import youhui2 from '../assets/images/优惠券领取@3x.png'
// 引入nav5张图
import nav1 from '../assets/images/01.png'
import nav2 from '../assets/images/02.png'
import nav3 from '../assets/images/03.png'
import nav4 from '../assets/images/04.png'
import nav5 from '../assets/images/05.png'
// 引入标签图片
// import shangxia from '../assets/images/上下箭头.png'
// import fenlei from '../assets/images/分类.png'
// 引入打折和背景标签
import dazhe from '../assets/images/打折标签.png'
import tishi from '../assets/images/提示标签.png'
//底部图片
import jianhuo from '../assets/images/尖货预购.png'
import changgou1 from '../assets/images/畅购全球1.png'
import changgou2 from '../assets/images/畅购全球2.png'
// 引入css
import '../assets/css/home.css'

//引入接口
import { New, groupon, indexList ,cartadd } from '../request/app.js'

function Home() {
    const Navigate = useNavigate()
    let [newList, changeNew] = useState([])
    let [grouponList, changeGroupon] = useState([])
    let [indexShopList0, changeIndex0] = useState([])
    let [indexShopList1, changeIndex1] = useState([])
    let [indexShopList2, changeIndex2] = useState([])
    let [indexShopList3, changeIndex3] = useState([])
    function goCatelist() {
        Navigate('/catelist')
    }
    // 新人列表接口
    useEffect(() => {
        New()
            .then(res => {
                changeNew([...res.list])
            })
    }, [])
    // 超级秒杀接口
    useEffect(() => {
        groupon()
            .then(res => {
                // console.log(res);
                changeGroupon([...res.list])
            })
    }, [])
    // 首页商品列表
    useEffect(() => {
        indexList()
            .then(res => {
                // console.log(res);
                changeIndex0([...res.list[0].content])
                changeIndex1([...res.list[1].content])
                changeIndex2([...res.list[2].content])
                changeIndex3([...res.list[3].content])
            })
    }, [])
    function addCart(id){
        cartadd({
            uid:JSON.parse(sessionStorage.getItem('userInfo')).uid,
            // uid: 'b8310bb0-e798-11ec-9135-3937bfd6e309',
            type: "1",
            goodsid: id,
            num: 1
        }
        ).then(res => {
            console.log(JSON.parse(sessionStorage.getItem('userInfo')).uid);
            console.log(res);
            if (res.code == '200') {
                Navigate('/index/cart')
            }

        })
        .catch(err=>{
            console.log(err);
        })
    }
    let navShuju = [
        {
            id: 1,
            title: "限时秒杀",
            img: nav1
        },
        {
            id: 2,
            title: "畅销商品",
            img: nav2
        },
        {
            id: 3,
            title: "品质大牌",
            img: nav3
        },
        {
            id: 4,
            title: "小U自营",
            img: nav4
        },
        {
            id: 5,
            title: "积分商城",
            img: nav5
        }
    ]
    return (
        <div className='bo'>
            <div className="navigation">
                <div className="btop">
                    <div className="time">
                        9:40
                    </div>
                </div>
                <div className='logo'>
                    <div className='logo-logo'>
                        <img src={logo} alt="" />
                    </div>
                    <div className='sea'>
                        <div className="Sch-inp">
                            <img src={searchimg} alt="" />
                            <input type="text" placeholder='按内容搜索' />
                            <button style={{ 'margin-left': '-41px' }} >搜索</button>
                        </div>
                    </div>
                    <div className='dizhi'>
                        <img src={dizhi} alt="" />
                    </div>
                </div>
            </div>

            <div className='home_bg'>
                <div className='newpeople'>
                    <div>新人专享</div>
                    <div>
                        <span>05</span>
                        :
                        <span>37</span>
                        :
                        <span>48</span>
                    </div>
                    <div>
                        <button onClick={() => goCatelist()}>查看更多</button>
                    </div>
                </div>

                <div className='home-show'>
                    <div className='home-show-title'>
                        <p>1重礼</p>
                        <p>新人特价商品专区</p>
                        <p>(限量供应先到先得)</p>
                    </div>
                    <div className='home-show-show'>


                        {
                            newList.map(item => {
                                return (
                                    <div className='show-show'>
                                        <div className='show-img'>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className='show-money'>
                                            <div className='show-money-p'>
                                                <p>{item.price}</p>
                                                <p>{item.market_price}</p>
                                            </div>
                                            <div className='show-money-img'>
                                                <div>
                                                    <img src={gouwuche} alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }


                    </div>
                </div>

                <div className='ticke'>
                    <div className='home-show-title'>
                        <p>2重礼</p>
                        <p>新人特价商品专区</p>
                        <p>(限量供应先到先得)</p>
                    </div>
                    <div className='prefer'>
                        <img src={youhui1} alt="" />
                        <img src={youhui2} alt="" />
                    </div>
                </div>

                <div className='nav'>
                    {
                        navShuju.map(item => {
                            return (
                                <div className='nav-box' kay={item.id}>
                                    <div><img src={item.img} alt="" /></div>
                                    <p>{item.title}</p>
                                </div>
                            )
                        })
                    }
                </div>

                <div className='one-show'>
                    <div className='newpeople'>
                        <div>超级秒杀</div>
                        <div>
                            <span>05</span>
                            :
                            <span>37</span>
                            :
                            <span>48</span>
                        </div>
                        <div>
                            <button style={{
                                'visibility': 'hidden'
                            }}>查看更多</button>
                        </div>
                    </div>
                    <div className='superDetail'>
                        <div>
                            <img src={gift2} alt="" />
                        </div>
                        <div className='super_right'>
                            <p>西木远山插花洁面乳精选太行山最优质</p>
                            <p>每人限购一件</p>
                            <div>
                                <span>￥29.99</span>
                                <span><s>69.9</s></span>
                                <img src={quclik} alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                <div className='home-show' id='kkk'>
                    <div className='home-show-title'>
                        <p>限时秒杀</p>
                        <p>信任专区特价商品</p>
                        <p>(限量供应,先到先得)</p>
                    </div>
                    <div className='home-show-show'>
                        {
                            grouponList.map(item => {
                                return (
                                    <div className='show-show'>
                                        <div className='show-img'>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className='show-money'>
                                            <div className='show-money-p'>
                                                <p>{item.price}</p>
                                                <p>{item.market_price}</p>
                                            </div>
                                            <div className='show-money-img'>
                                                <div>
                                                    <img src={gouwuche} alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>

                <div className='boo'>
                    <div>
                        <p className='p1'>双11尖货预约</p>
                        <li className='one-img'>
                            <img src={jianhuo} alt="" />
                        </li>
                    </div>
                    <div></div>
                    <div>
                        <p className='p2'>畅购全球</p>
                        <ul className='two-img' >
                            <li><img src={changgou1} alt="" /></li>
                            <li><img src={changgou2} alt="" /></li>
                        </ul>
                    </div>
                </div>
                <Tabs>
                    <Tabs.Tab title='全部商品' key='fruits'>
                        {
                            indexShopList1.map(item => {
                                return (

                                    <div className='shop-shop'>
                                        <div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div>
                                            <p>
                                                <li>
                                                    <img src={dazhe} alt="" />
                                                </li>
                                                <li className='goodsname'>{item.goodsname}</li>
                                                <p className='description'>
                                                    {item.description}
                                                </p>
                                            </p>
                                            <p className='tishi'>
                                                <img src={tishi} alt="" />
                                                <span>直降{parseInt(item.market_price - item.price)}元</span>
                                                <span>限购1件</span>
                                            </p>
                                            <p>
                                                <p className='nowPrice'>&yen;<span>{item.price}</span></p>
                                                <p className='oldPrice'><s>&yen;{item.market_price}</s></p>
                                            </p>
                                            <button  onClick={() => addCart(item.id)}>加入购物车</button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Tabs.Tab>
                    <Tabs.Tab title='上新水果' key='vegetables'>
                    {
                            indexShopList0.map(item => {
                                return (

                                    <div className='shop-shop'>
                                        <div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div>
                                            <p>
                                                <li>
                                                    <img src={dazhe} alt="" />
                                                </li>
                                                <li className='goodsname'>{item.goodsname}</li>
                                                <p className='description'>
                                                    {item.description}
                                                </p>
                                            </p>
                                            <p className='tishi'>
                                                <img src={tishi} alt="" />
                                                <span>直降{parseInt(item.market_price - item.price)}元</span>
                                                <span>限购1件</span>
                                            </p>
                                            <p>
                                                <p className='nowPrice'>&yen;<span>{item.price}</span></p>
                                                <p className='oldPrice'><s>&yen;{item.market_price}</s></p>
                                            </p>
                                            <button  onClick={() => addCart(item.id)}>加入购物车</button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Tabs.Tab>
                    <Tabs.Tab title='水果推荐' key='animals'>
                    {
                            indexShopList2.map(item => {
                                return (

                                    <div className='shop-shop'>
                                        <div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div>
                                            <p>
                                                <li>
                                                    <img src={dazhe} alt="" />
                                                </li>
                                                <li className='goodsname'>{item.goodsname}</li>
                                                <p className='description'>
                                                    {item.description}
                                                </p>
                                            </p>
                                            <p className='tishi'>
                                                <img src={tishi} alt="" />
                                                <span>直降{parseInt(item.market_price - item.price)}元</span>
                                                <span>限购1件</span>
                                            </p>
                                            <p>
                                                <p className='nowPrice'>&yen;<span>{item.price}</span></p>
                                                <p className='oldPrice'><s>&yen;{item.market_price}</s></p>
                                            </p>
                                            <button onClick={()=>addCart(item.id)}>加入购物车</button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Tabs.Tab>
                    <Tabs.Tab title='粮油商超' key='tiger'>
                    {
                            indexShopList3.map(item => {
                                return (

                                    <div className='shop-shop'>
                                        <div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div>
                                            <p>
                                                <li>
                                                    <img src={dazhe} alt="" />
                                                </li>
                                                <li className='goodsname'>{item.goodsname}</li>
                                                <p className='description'>
                                                    {item.description}
                                                </p>
                                            </p>
                                            <p className='tishi'>
                                                <img src={tishi} alt="" />
                                                <span>直降{parseInt(item.market_price - item.price)}元</span>
                                                <span>限购1件</span>
                                            </p>
                                            <p>
                                                <p className='nowPrice'>&yen;<span>{item.price}</span></p>
                                                <p className='oldPrice'><s>&yen;{item.market_price}</s></p>
                                            </p>
                                            <button  onClick={() => addCart(item.id)}>加入购物车</button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Tabs.Tab>
                </Tabs>


                {/* <div className='list'>
                    <li className='action'>综合推荐</li>
                    <li>销量</li>
                    <li>价格
                        <img src={shangxia} alt="" />
                    </li>
                    <li>好评度</li>
                    <li>店铺</li>
                    <li className='action'>
                        <img src={fenlei} alt="" style={{ 'margin-right': '6px' }} />
                        分类
                    </li>
                </div> */}

                {/* <div className='shop'>
                    <div className='shop-shop'>
                        <div>
                            <img src="" alt="" />
                        </div>
                        <div>
                            <p>
                                <li>
                                    <img src={dazhe} alt="" />
                                </li>
                                <li>溪牧原山茶花洁面乳精选太行山最……</li>
                            </p>
                            <p className='tishi'>
                                <img src={tishi} alt="" />
                                <span>直降198元</span>
                                <span>限购1件</span>
                            </p>
                            <p>
                            </p>
                        </div>

                    </div>

                </div> */}


            </div>
        </div>
    )
}

export default Home